<template>
  <div id="bill">
    <div class="bill_list">
      <div class="bill-items" v-if="dataList.length>0">
        <div class="detail bill-item block">
          <p class="flex space-between"><span>2019-03-23 12:20:32</span><span class="is-over">已开票</span></p>
          <p class="flex space-between"><span>商户名称</span><span>江海区云商湘170号商品信息咨询部</span></p>
          <p class="flex space-between"><span>账单周期</span><span>2019.12.31-2020.01.09</span></p>
          <p class="flex space-between"><span>应付金额</span><span>10,400元</span></p>
          <div><div class="base_btn zl-btn">租赁费发票</div><div class="base_btn fw-btn">服务费发票</div></div>
          <div style="clear: both;"></div>
        </div>

        <div class="detail bill-item block">
          <p class="flex space-between"><span>2019-03-23 12:20:32</span><span class="is-over">已开票</span></p>
          <p class="flex space-between"><span>商户名称</span><span>江海区云商湘170号商品信息咨询部</span></p>
          <p class="flex space-between"><span>账单周期</span><span>2019.12.31-2020.01.09</span></p>
          <p class="flex space-between"><span>应付金额</span><span>10,400元</span></p>
          <div><div><div class="base_btn zl-btn">租赁费发票</div><div class="base_btn fw-btn">服务费发票</div></div></div>
          <div style="clear: both;"></div>
        </div>

      </div>
      <div v-else="" style="margin: 0 auto; width: 141px; padding-top: 35%; text-align: center; color: #333333;">
        <img style="width: 100%;" src="./imgs/nothing.png">
        <div>尚无开票信息</div>
      </div>
    </div>
    <mnav cur="3"></mnav>
  </div>
</template>

<script>
  export default {
    name: 'company-bill',
    data () {
      return {
        dataList: [{}]

      }
    },
    created () {
      this.invoiceQueryList();
    },
    methods: {
      //获取发票列表
      invoiceQueryList(){
        this.$http.post('yxc/invoice/queryList',{carWxUserId: localStorage.getItem('wxUserId'), type: '01'}).then(res=>{

          if(res.code == '200') {
            this.dataList = res.data;
          }
        })
      }
    },

  }
</script>

<style lang="scss" scoped>
  #bill {
    margin: 0 10px;
    margin-bottom: 80px;
  }

  h3 {
    margin: 0px 0px;
  }

  .msg {
    margin-top: 5px;
    padding: 10px 5px;
    background: rgba(255, 238, 233, 1);
    border-radius: 5px;
    /*text-align: center;*/
    color: #FF5D32;
    margin-bottom: 10px;
    font-size: 12px;
    span {
      color: #333;
      text-decoration: underline;
      /*border-bottom: 1px solid #333;*/
    }

  }

  .tags{
    .row-bg {
      padding: 10px 0;
    }
    .grid-content{
      text-align: center;
      font-size: 15px;
      height: 30px;
      line-height:30px;
      color: #999999;
      .active{
        color: #333333;
        border-bottom: 4px solid #1C67FF;
        border-radius: 2px;
        padding-bottom: 3px;
      }
    }
  }

  .submit {
    background: rgba(28, 103, 255, 1);
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    margin: 20px 10px;
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-between {
    justify-content: space-between;
  }

  .block {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px 15px;

  .infos {
    font-size: 14px;
    color: #333;
  }

  }

  .base_btn{display: inline-block; padding: 0px 20px;border-radius: 5px; height: 32px; line-height: 32px;text-align: center;}
  .detail{
    font-size:13px;
    .fw-btn{border:1px solid #FF9600;border-radius:5px; color: #FF9600; font-weight: bold; float: right; padding: 0 10px; margin-right: 10px;}
    .zl-btn{border:1px solid #1C67FF;border-radius:5px; color: #1C67FF; font-weight: bold; float:right; padding: 0 10px;}
  }
  .detail p{color: #333333;}
  .detail p span:first-child{color: #999999;}
  .detail p .is-wait{color:#FF5D32; font-weight: bold;}
  .detail p .is-over{color:#999999 !important; font-weight: bold;}


</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }


</style>
